<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24" >
      <a-col :md="18" :sm="24">
        <a-row :gutter="16">
          <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
            <chart-card :loading="loading" title="未收賬單" :total="tjData.allBillNum + '個'">
              <div>
                <trend flag="ups" style="margin-right: 16px;">
                  <span slot="term">今日收</span>
                  {{ tjData.nowBillNum }}個
                </trend>
                <trend flag="ups">
                  <span slot="term">逾期</span>
                  {{ tjData.yqBillNum }}個
                </trend>
              </div>
            </chart-card>
          </a-col>
          <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
            <chart-card :loading="loading" title="在租租約" :total="tjData.allLeaseNum + '個'">
              <div>
                <trend flag="ups" style="margin-right: 16px;">
                  <span slot="term">今日到期</span>
                  {{ tjData.nowLeaseNum }}個
                </trend>
                <trend flag="ups">
                  <span slot="term">逾期</span>
                  {{ tjData.yqLeaseNum }}個
                </trend>
              </div>
            </chart-card>
          </a-col>
          <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
            <chart-card :loading="loading" title="預定" :total="tjData.allReservationNum + '個'">
              <div>
                <trend flag="ups" style="margin-right: 16px;">
                  <span slot="term">今日入住</span>
                  {{ tjData.nowReservationNum }}個
                </trend>
                <trend flag="ups">
                  <span slot="term">逾期</span>
                  {{ tjData.yqReservationNum }}個
                </trend>
              </div>
            </chart-card>
          </a-col>
          <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
            <chart-card :loading="loading" title="閑置房間" :total="tjData.allRoomNum + '個'">
              <div>
                <!-- <trend flag="ups" style="margin-right: 16px;">
                  <span slot="term">閑置房間數</span>
                  6個
                </trend> -->
                <!-- <trend flag="ups">
                  <span slot="term">閑置率</span>
                  15%
                </trend> -->
              </div>
            </chart-card>
          </a-col>
        </a-row>
        <div class="item-menu">
          <a-steps>
            <a-step status="finish" title="房產管理" @click="routerChange(1)">
              <a-icon slot="icon" type="bank" />
            </a-step>
            <a-step status="finish" title="租約" @click="routerChange(2)">
              <a-icon slot="icon" type="solution" />
            </a-step>
            <a-step status="finish" title="收租" @click="routerChange(3)">
              <a-icon slot="icon" type="red-envelope" />
            </a-step>
            <a-step status="finish" title="續租" @click="routerChange(2)">
              <a-icon slot="icon" type="schedule" />
            </a-step>
            <a-step status="finish" title="退租" @click="routerChange(2)">
              <a-icon slot="icon" type="file-done" />
            </a-step>
          </a-steps>
        </div>
        <div>
          <a-card :bordered="false">
            <a-tabs :activeKey="numType" @change="activeKeyChange">
              <a-tab-pane key="0" tab="本月未收賬單">
                <s-table
                  ref="table"
                  size="default"
                  :columns="columns"
                  :data="loadData"
                  :alert="true"
                  bordered
                  :rowKey="(record) => record.id">
                  <template class="table-operator" slot="billType"  slot-scope="text" >
                    {{ billTypeFilter(text) }}
                  </template>
                  <template class="table-operator" slot="rentStartDate"  slot-scope="text, record" >
                    {{ text }} - {{ record.rentEndDate }}
                  </template>
                  <template slot="subtotal" slot-scope="text">
                    <span  :class="text < 0 ? 'abvv': 'ab' ">{{ text }}</span>
                  </template>
                  <template slot="billStatus">
              <span>
                <a-tag color="orange">
                  未收
                </a-tag>
              </span>
                  </template>
                  <span slot="action" slot-scope="text, record">
             <a @click="$refs.readDetailForm.edit(record,'','',2)">查看</a>
             <a-divider type="vertical" />
              <a-dropdown >
                <a class="ant-dropdown-link">
                  更多 <a-icon type="down" />
                </a>
                <a-menu slot="overlay">
                  <a-menu-item v-if="record.billStatus ===0">
                    <a @click="$refs.arriveForm.edit(record)">到賬</a>
                  </a-menu-item>
                  <a-menu-item v-if="record.hyCb ===1 && (record.billStatus ===0 || record.billStatus ===3)">
                    <a @click="$refs.addFormMeterOne.add(record)">抄表</a>
                  </a-menu-item>
                  <a-menu-item v-if="record.billStatus ===0 || record.billStatus ===3">
                    <a @click="$refs.editFormOne.edit(record,'','',1)">修改</a>
                  </a-menu-item>
                  <a-menu-item v-if="record.billStatus ===0">
                    <a @click="$refs.tuoFormOne.edit(record)">拖欠</a>
                  </a-menu-item>
                  <a-menu-item v-if="record.billStatus ===3">
                    <a @click="$refs.tzqsForm.edit(record.id)">退租清算</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a @click="$refs.printBillDetail.edit(record.id)">打印</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a @click="$refs.leaseDetail.edit(record.houseLeaseId)">租約詳情</a>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </span>
                </s-table>
              </a-tab-pane>
              <a-tab-pane key="1" tab="本月到期租約">
                <s-table
                  ref="table"
                  size="default"
                  :columns="columns2"
                  :data="loadData2"
                  :alert="true"
                  :rowKey="(record) => record.id">
                  <span slot="action2" slot-scope="text, record">
                      <a @click="$refs.leaseDetail.edit(record.id)">詳情</a>
                      <a-divider type="vertical" />
                      <a-dropdown >
                        <a class="ant-dropdown-link">
                          更多 <a-icon type="down" />
                        </a>
                        <a-menu slot="overlay">
                          <a-menu-item>
                            <a @click="lookBillById2(record.id)">查看賬單</a>
                          </a-menu-item>
                          <a-menu-item v-if="record.leaseStatus === 1" >
                            <a @click="$refs.houseBillPlanForm.edit(record)" >租金調整</a>
                          </a-menu-item>
                          <a-menu-item  v-if="record.leaseStatus === 1">
                            <a @click="$refs.tuiForm.edit(record.id)">退租</a>
                          </a-menu-item>
                          <a-menu-item  v-if="record.leaseStatus !== 2">
                            <a @click="$refs.xuzuForm.edit(record.id)">續租</a>
                          </a-menu-item>
                          <!-- <a-menu-item>
                            <a @click="$refs.cancelRoomReservation.edit(record.id)">換房</a>
                          </a-menu-item> -->
                          <a-menu-item>
                            <a @click="$refs.printLease.edit(record.id)">打印</a>
                          </a-menu-item>
                        </a-menu>
                      </a-dropdown>
            </span>
                </s-table>
              </a-tab-pane>
              <a-tab-pane key="2" tab="本月未付賬單">
                <s-table
                  ref="table"
                  size="default"
                  :columns="columns3"
                  :data="loadData3"
                  :alert="true"
                  bordered
                  :rowKey="(record) => record.id">
                  <template class="table-operator" slot="billType"  slot-scope="text" >
                    {{ billTypeFilter(text) }}
                  </template>
                  <template class="table-operator" slot="rentStartDate"  slot-scope="text, record" >
                    {{ text }} - {{ record.rentEndDate }}
                  </template>
                  <template slot="subtotal" slot-scope="text">
                    <span  :class="text < 0 ? 'abvv': 'ab' ">{{ text }}</span>
                  </template>
                  <template slot="billStatus2">
              <span>
                <a-tag color="orange">
                  未付
                </a-tag>
              </span>
                  </template>
                  <span slot="action3" slot-scope="text, record">
             <a @click="$refs.readDetailForm.edit(record,'','',2)">查看</a>
             <a-divider type="vertical" />
              <a-dropdown >
                <a class="ant-dropdown-link">
                  更多 <a-icon type="down" />
                </a>
                <a-menu slot="overlay">
                  <a-menu-item v-if="record.billStatus ===0">
                    <a @click="$refs.arriveForm.edit(record)">到賬</a>
                  </a-menu-item>
                  <a-menu-item v-if="record.hyCb ===1 && (record.billStatus ===0 || record.billStatus ===3)">
                    <a @click="$refs.addFormMeterOne.add(record)">抄表</a>
                  </a-menu-item>
                  <a-menu-item v-if="record.billStatus ===0 || record.billStatus ===3">
                    <a @click="$refs.editFormOne.edit(record,'','',1)">修改</a>
                  </a-menu-item>
                  <a-menu-item v-if="record.billStatus ===0">
                    <a @click="$refs.tuoFormOne.edit(record)">拖欠</a>
                  </a-menu-item>
                  <a-menu-item v-if="record.billStatus ===3">
                    <a @click="$refs.tzqsForm.edit(record.id)">退租清算</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a @click="$refs.printBillDetail.edit(record.id)">打印</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a @click="$refs.leaseDetail.edit(record.houseLeaseId)">租約詳情</a>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </span>
                </s-table>
              </a-tab-pane>
              <a-tab-pane key="3" tab="本月到期業主">
                <s-table
                  ref="table"
                  size="default"
                  :columns="columns4"
                  :data="loadData4"
                  :alert="true"
                  :rowKey="(record) => record.id"
                >
                    <span slot="action4" slot-scope="text, record">
              <a  @click="$refs.editForm.edit(record.id)">详情</a>
              <a-divider type="vertical"/>
              <a-dropdown >
                  <a class="ant-dropdown-link">
                    更多 <a-icon type="down" />
                  </a>
                  <a-menu slot="overlay">
                    <a-menu-item>
                      <a @click="lookBillById(record.id)">查看賬單</a>
                    </a-menu-item>
                    <a-menu-item v-if="record.leaseStatus !== 2">
                      <a @click="$refs.xuzuOwnerForm.edit(record.id)">續租</a>
                    </a-menu-item>
                    <a-menu-item  v-if="record.leaseStatus === 1">
                      <a @click="$refs.tuiOwnerForm.edit(record.id)">退租</a>
                    </a-menu-item>
                    <a-menu-item  v-if="record.leaseStatus !== 2">
                      <a @click="$refs.billPlan.edit(record.id)">賬單計劃</a>
                    </a-menu-item>
                  </a-menu>
                </a-dropdown>
            </span>
                </s-table>
              </a-tab-pane>
            </a-tabs>
          </a-card>

        </div>
      </a-col>
      <a-col :md="6" :sm="24">
        <div class="scrll">
          <a-list size="small" bordered :data-source="tsData">
            <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
              <a-list-item-meta
                :description="item.typeName + '-租客：' + item.name + '-收交租日期：' + item.rentedDay">
                <a slot="title">{{ item.roomName }}</a>
              </a-list-item-meta>
            </a-list-item>
            <div slot="header">
              收/交租提醒
            </div>
          </a-list>
        </div>
        <div class="scrll">
          <a-list size="small" bordered :data-source="nowTsData">
            <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
              <a-list-item-meta
                :description="item.typeName + '-租客：' + item.name + '-收交租日期：' + item.rentedDay">
                <a slot="title">{{ item.roomName }}</a>
              </a-list-item-meta>
            </a-list-item>
            <div slot="header">
              今日事項
            </div>
          </a-list>
        </div>
      </a-col>
    </a-row>
    <arrive-form ref="arriveForm" @ok="handleOk" />
    <add-form-meter-one ref="addFormMeterOne" @ok="handleOk" />
    <edit-form-one ref="editFormOne" @ok="handleOk" />
    <tuo-form-one ref="tuoFormOne" @ok="handleOk" />
    <tzqs-form ref="tzqsForm" @ok="handleOk" />
    <print-bill-detail ref="printBillDetail"/>
    <lease-detail ref="leaseDetail" @ok="handleOk" />
    <read-detail-form ref="readDetailForm"/>
    <xuzu-owner-form ref="xuzuOwnerForm" @ok="handleOk" />
    <tui-owner-form ref="tuiOwnerForm" @ok="handleOk" />
    <bill-plan ref="billPlan"/>
    <edit-form ref="editForm" @ok="handleOk" />
    <house-bill-plan-form ref="houseBillPlanForm" @ok="handleOk" />
    <tui-form ref="tuiForm" @ok="handleOk" />
    <xuzu-form ref="xuzuForm" @ok="handleOk" />
    <print-lease ref="printLease"/>
  </div>
</template>
<script>
  import { STable, ChartCard, MiniArea, MiniBar, MiniProgress, RankList, Bar, Trend, NumberInfo, MiniSmoothArea } from '@/components'
  import { getTs, getNowTs, getTjData } from '@/api/modular/main/billotherrevenues/billOtherRevenuesManage'
  import { houseBillAnalyPage } from '@/api/modular/main/housebill/houseBillManage'
  import { mixinDevice } from '@/utils/mixin'
  import arriveForm from '../../main/housebill/arriveForm.vue'
  import addFormMeterOne from '../../main/hydropowermeter/addFormMeterOne.vue'
  import tuoFormOne from '../../main/housebill/tuoFormOne.vue'
  import tzqsForm from '../../main/housebill/tzqsForm.vue'
  import editFormOne from '../../main/housebill/editFormOne.vue'
  import readDetailForm from '../../main/housebill/readDetailForm.vue'
  import printBillDetail from '../../main/housebill/printBillDetail.vue'
  import leaseDetail from '../../main/houselease/leaseDetail.vue'
  import xuzuOwnerForm from '../../main/ownerleasebill/xuzuOwnerForm.vue'
  import tuiOwnerForm from '../../main/ownerleasebill/tuiOwnerForm.vue'
  import billPlan from '../../main/ownerleasebill/billPlan.vue'
  import editForm from '../../main/ownerlease/editForm.vue'
  import houseBillPlanForm from '../../main/housebill/houseBillPlanForm.vue'
  import tuiForm from '../../main/housebill/tuiForm.vue'
  import xuzuForm from '../../main/housebill/xuzuForm.vue'
  import printLease from '../../main/houselease/printLease.vue'
  export default {
    name: 'Analysis',
    mixins: [mixinDevice],
    components: {
      STable,
      ChartCard,
      MiniArea,
      MiniBar,
      MiniProgress,
      RankList,
      Bar,
      Trend,
      NumberInfo,
      MiniSmoothArea,
      readDetailForm,
      editFormOne,
      arriveForm,
      addFormMeterOne,
      tuoFormOne,
      tzqsForm,
      printBillDetail,
      leaseDetail,
      xuzuOwnerForm,
      tuiOwnerForm,
      billPlan,
      editForm,
      houseBillPlanForm,
      tuiForm,
      xuzuForm,
      printLease
    },
    data () {
      return {
        loading: false,
        tsData: [],
        tjData: {},
        nowTsData: [],
        queryParam: { type: 1, numType: 0 },
        queryParam2: { type: 1, numType: 1 },
        queryParam3: { type: 1, numType: 2 },
        queryParam4: { type: 1, numType: 3 },
        numType: '0',
        // 表头
        columns: [
          {
            title: '房間',
            align: 'center',
            dataIndex: 'roomName'
          },
          {
            title: '承租人',
            align: 'center',
            dataIndex: 'name'
          },
          {
            title: '收租日',
            align: 'center',
            dataIndex: 'rentedDay'
          },
          {
            title: '小計',
            align: 'center',
            dataIndex: 'subtotal',
            scopedSlots: { customRender: 'subtotal' }
          },
          {
            title: '狀態',
            align: 'center',
            dataIndex: 'billStatus',
            scopedSlots: { customRender: 'billStatus' }
          },
          {
            title: '操作',
            width: '150px',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
          }
        ],
        columns2: [
          {
            title: '入住房間',
            align: 'center',
            dataIndex: 'roomName'
          },
          {
            title: '承租人',
            align: 'center',
            dataIndex: 'name'
          },
          {
            title: '聯係方式',
            align: 'center',
            dataIndex: 'phone'
          },
          {
            title: '起租日期',
            align: 'center',
            dataIndex: 'rentStartDate'
          },
          {
            title: '到租日期',
            align: 'center',
            dataIndex: 'rentEndDate'
          },
          {
            title: '操作',
            width: '150px',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action2' }
          }
        ],
        columns3: [
          {
            title: '房間',
            align: 'center',
            dataIndex: 'roomName'
          },
          {
            title: '承租人',
            align: 'center',
            dataIndex: 'name'
          },
          {
            title: '收租日',
            align: 'center',
            dataIndex: 'rentedDay'
          },
          {
            title: '小計',
            align: 'center',
            dataIndex: 'subtotal',
            scopedSlots: { customRender: 'subtotal' }
          },
          {
            title: '狀態',
            align: 'center',
            dataIndex: 'billStatus',
            scopedSlots: { customRender: 'billStatus2' }
          },
          {
            title: '操作',
            width: '150px',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action3' }
          }
        ],
        columns4: [
          {
            title: '簽約房間',
            align: 'center',
            dataIndex: 'roomName'
          },
          {
            title: '業主名稱',
            align: 'center',
            dataIndex: 'name'
          },
          {
            title: '手機號',
            align: 'center',
            dataIndex: 'phone'
          },
          {
            title: '租期開始時間',
            align: 'center',
            dataIndex: 'rentStartDate'
          },
          {
            title: '租期結束時間',
            align: 'center',
            dataIndex: 'rentEndDate'
          }
        ],
        tstyle: { 'padding-bottom': '0px', 'margin-bottom': '10px' },
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          return houseBillAnalyPage(Object.assign(parameter, this.queryParam)).then((res) => {
            return res.data
          })
        },
        loadData2: parameter => {
          return houseBillAnalyPage(Object.assign(parameter, this.queryParam2)).then((res) => {
            return res.data
          })
        },
        loadData3: parameter => {
          return houseBillAnalyPage(Object.assign(parameter, this.queryParam3)).then((res) => {
            return res.data
          })
        },
        loadData4: parameter => {
          return houseBillAnalyPage(Object.assign(parameter, this.queryParam4)).then((res) => {
            return res.data
          })
        }
      }
    },
    created () {
      this.initData()
      this.columns4.push({
        title: '操作',
        width: '150px',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action4' }
      })
    },
    methods: {
      initData() {
        this.getTjsData()
        this.getTsData()
        this.getNowTsData()
      },
      lookBillById (id) {
        this.$router.push({ path: '/ownerbillbyid', query: { id: id } })
      },
      lookBillById2 (id) {
        this.$router.push({ path: '/housebilldetailbyid', query: { id: id } })
      },
      activeKeyChange(key) {
        this.numType = key
      },
      getTjsData () {
        getTjData().then((res) => {
          if (res.code === 200) {
            this.tjData = res.data
          } else {
            this.$message.error(res.msg)
          }
        })
      },
      getTsData() {
        getTs().then((res) => {
          if (res.code === 200) {
            this.tsData = res.data
          } else {
            this.$message.error(res.msg)
          }
        })
      },
      getNowTsData() {
        getNowTs().then((res) => {
          if (res.code === 200) {
            this.nowTsData = res.data
          } else {
            this.$message.error(res.msg)
          }
        })
      },
      handleOk () {
        this.$refs.table.refresh()
        this.$refs.table2.refresh()
      },
      routerChange(type) {
        if (type === 1) {
          this.$router.push({ path: '/busRealEstate' })
        } else if (type === 2) {
          this.$router.push({ path: '/houseLease' })
        } else if (type === 3) {
          this.$router.push({ path: '/houseBill' })
        }
      }
    }
  }
</script>
<style lang="less" scoped>
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;
    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }
  .antd-pro-pages-dashboard-analysis-twoColLayout {
    position: relative;
    display: flex;
    display: block;
    flex-flow: row wrap;
  }
  .antd-pro-pages-dashboard-analysis-salesCard {
    height: calc(100% - 24px);
    /deep/ .ant-card-head {
      position: relative;
    }
  }
  .dashboard-analysis-iconGroup {
    i {
      margin-left: 16px;
      color: rgba(0,0,0,.45);
      cursor: pointer;
      transition: color .32s;
      color: black;
    }
  }
  .analysis-salesTypeRadio {
    position: absolute;
    right: 54px;
    bottom: 12px;
  }
  .item-t{
    background-color: white;
  }
  .item-t-tittle{
    text-align: center;
    font-size: 18px;
  }
  .item-menu{
    background-color: white;
    padding: 16px;
  }
  .tx{
    width: 100%;
    height:400px;
    max-height: 500px;
    margin-bottom: 16px;
    background-color: white;
    float: left;
  }
  .scrll{
    overflow-y:scroll;
    width: 100%;
    height:400px;
    max-height: 500px;
    margin-bottom: 16px;
    background-color: white;
    float: left;
  }
  .scrll::-webkit-scrollbar {
    width: 8px;
  }
  .scrll::-webkit-scrollbar-track {
    background-color:rgb(250, 241, 241);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius:2em;
  }
  .scrll::-webkit-scrollbar-thumb {
    background-color:rgb(205, 209, 205);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius:2em;
  }
  .s-table-tool{
    display: none;
  }
</style>
